@using jiuyuan.数据.用户类
@using jiuyuan.服务
@inject IUserService UserService
@inject NavigationManager Navigation

<div id="login-page">
    <div class="floating-crystal crystal-1"></div>
    <div class="floating-crystal crystal-2"></div>
    
    <div class="login-container">
        <h1 class="login-title">九渊世界</h1>
        
        <!-- 登录表单 -->
        <div id="login-form" style="display: @(showLoginForm ? "block" : "none");">
            <div class="form-group">
                <label class="form-label" for="login-username">用户名</label>
                <input type="text" id="login-username" class="form-input" placeholder="输入用户名" @bind="Username" @onkeydown="登录">
            </div>
            <div class="form-group">
                <label class="form-label" for="login-password">密码</label>
                <input type="password" id="login-password" class="form-input" placeholder="输入密码" @bind="Password" @onkeydown="登录">
            </div>
            @if (!string.IsNullOrEmpty(LoginError))
            {
                <div class="error-message">@LoginError</div>
            }
            <button class="btn btn-full" @onclick="OnLogin">登录</button>
            <div class="toggle-form">
                没有账号？ <a @onclick="ShowRegister">立即注册</a>
            </div>
        </div>
        
        <!-- 注册表单 -->
        <div id="register-form" style="display: @(!showLoginForm ? "block" : "none");">
            <div class="form-group">
                <label class="form-label" for="register-username">用户名</label>
                <input type="text" id="register-username" class="form-input" placeholder="创建用户名" @bind="RegisterUsername">
            </div>
            <div class="form-group">
                <label class="form-label" for="register-email">邮箱</label>
                <input type="email" id="register-email" class="form-input" placeholder="输入邮箱" @bind="RegisterEmail">
            </div>
            <div class="form-group">
                <label class="form-label" for="register-password">密码</label>
                <input type="password" id="register-password" class="form-input" placeholder="创建密码" @bind="RegisterPassword">
            </div>
            <div class="form-group">
                <label class="form-label" for="register-confirm">确认密码</label>
                <input type="password" id="register-confirm" class="form-input" placeholder="再次输入密码" @bind="RegisterConfirmPassword">
            </div>
            @if (!string.IsNullOrEmpty(RegisterError))
            {
                <div class="error-message">@RegisterError</div>
            }
            <button class="btn btn-full" @onclick="OnRegister">注册</button>
            <div class="toggle-form">
                已有账号？ <a @onclick="ShowLogin">立即登录</a>
            </div>
        </div>
    </div>
</div>

@code {
    [Inject]
    IJSRuntime JS { get; set; } = null!;

    // 登录相关变量
    private string Username { get; set; } = "";
    private string Password { get; set; } = "";
    private string LoginError { get; set; } = "";

    // 注册相关变量
    private string RegisterUsername { get; set; } = "";
    private string RegisterEmail { get; set; } = "";
    private string RegisterPassword { get; set; } = "";
    private string RegisterConfirmPassword { get; set; } = "";
    private string RegisterError { get; set; } = "";

    // 控制显示哪个表单
    private bool showLoginForm = true;

    // 事件回调
    [Parameter]
    public EventCallback<LoginEventArgs> OnLoginSuccess { get; set; }

    private async Task 登录(KeyboardEventArgs e)
    {
        if(e.Key == "Enter")
        {
            await OnLogin();
        }
    }
    // 登录功能
    private async Task OnLogin()
    {
        if (string.IsNullOrEmpty(Username) || string.IsNullOrEmpty(Password))
		{
			LoginError = "请输入用户名和密码";
			return;
		}

		try
		{
			var user = await UserService.用户登录(Username, Password);
			if (user != null)
			{
				// 触发登录成功事件
				await OnLoginSuccess.InvokeAsync(new LoginEventArgs { Username = Username });

				// 登录成功，检查是否有角色
				if (user.玩家角色列表 == null || user.玩家角色列表.Count == 0)
				{
					// 没有角色，跳转到角色创建页面，并传递用户ID
					Navigation.NavigateTo($"/character-creation/{user.Id}");
                }
                else
                {
                    // 有角色，跳转到世界页面，并传递用户ID
                    Navigation.NavigateTo($"/world/{user.Id}");
                }
            }
            else
            {
                LoginError = "用户名或密码错误";
            }
        }
        catch (Exception ex)
        {
            LoginError = $"登录失败: {ex.Message}";
        }
    }

    // 注册功能
    private async Task OnRegister()
    {
        // 重置错误信息
        RegisterError = "";

        if (string.IsNullOrEmpty(RegisterUsername) ||
            string.IsNullOrEmpty(RegisterEmail) ||
            string.IsNullOrEmpty(RegisterPassword) ||
            string.IsNullOrEmpty(RegisterConfirmPassword))
        {
            RegisterError = "请填写所有字段";
            return;
        }

        if (RegisterPassword != RegisterConfirmPassword)
        {
            RegisterError = "两次输入的密码不一致";
            return;
        }

        try
        {
            var newUser = await UserService.用户注册(RegisterUsername, RegisterPassword, RegisterEmail);
            // 注册成功，显示成功消息并切换到登录表单
            RegisterError = "注册成功！请登录";
            await Task.Delay(2000); // 等待2秒显示成功消息
            ShowLogin();
        }
        catch (Exception ex)
        {
            RegisterError = $"注册失败: {ex.Message}";
        }
    }

    // 显示注册表单
    private void ShowRegister()
    {
        showLoginForm = false;
        // 清除错误信息
        LoginError = "";
        RegisterError = "";
    }

    // 显示登录表单
    private void ShowLogin()
    {
        showLoginForm = true;
        // 清除错误信息
        LoginError = "";
        RegisterError = "";
    }
}

<style>
    /* 基础样式 */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    }
    
    #login-page {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100vw;
        background: radial-gradient(circle at center, #1a1a3a 0%, #0a0a1a 100%);
        position: relative;
        z-index: 100;
    }
    
    .login-container {
        background-color: rgba(20, 20, 40, 0.8);
        border: 2px solid #4a2c8d;
        border-radius: 10px;
        padding: 30px;
        width: 400px;
        box-shadow: 0 0 20px rgba(106, 13, 173, 0.5);
        position: relative;
    }
    
    .login-container::before {
        content: '';
        position: absolute;
        top: -5px;
        left: -5px;
        right: -5px;
        bottom: -5px;
        background: linear-gradient(45deg, #6a0dad, #ff0055, #00ccff);
        border-radius: 12px;
        z-index: -1;
        filter: blur(10px);
        opacity: 0.5;
    }
    
    .login-title {
        text-align: center;
        font-size: 2.5rem;
        margin-bottom: 30px;
        color: #b19cd9;
        text-shadow: 0 0 10px rgba(177, 156, 217, 0.7);
        font-family: 'Georgia', serif;
    }
    
    .form-group {
        margin-bottom: 20px;
    }
    
    .form-label {
        display: block;
        margin-bottom: 8px;
        color: #a0a0e0;
    }
    
    .form-input {
        width: 100%;
        padding: 12px;
        background-color: rgba(30, 30, 60, 0.8);
        border: 1px solid #4a2c8d;
        border-radius: 5px;
        color: #e0e0ff;
        font-size: 1rem;
    }
    
    .form-input:focus {
        outline: none;
        border-color: #6a0dad;
        box-shadow: 0 0 10px rgba(106, 13, 173, 0.5);
    }
    
    .btn {
        padding: 12px 20px;
        background: linear-gradient(to right, #4a2c8d, #6a0dad);
        border: none;
        border-radius: 5px;
        color: white;
        font-size: 1rem;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .btn:hover {
        background: linear-gradient(to right, #5a3c9d, #7a1ddd);
        box-shadow: 0 0 15px rgba(106, 13, 173, 0.7);
    }
    
    .btn-full {
        width: 100%;
        margin-top: 10px;
    }
    
    .toggle-form {
        text-align: center;
        margin-top: 20px;
        color: #a0a0e0;
    }
    
    .toggle-form a {
        color: #b19cd9;
        text-decoration: none;
        cursor: pointer;
    }
    
    .error-message {
        color: #ff5555;
        margin-bottom: 10px;
        text-align: center;
    }
    
    /* 特效 */
    .floating-crystal {
        position: absolute;
        width: 100px;
        height: 100px;
        background: radial-gradient(circle at 30% 30%, rgba(106, 13, 173, 0.7), transparent 70%);
        border-radius: 50%;
        filter: blur(5px);
        z-index: 0;
    }
    
    .crystal-1 {
        top: 10%;
        left: 10%;
        animation: float 15s infinite ease-in-out;
    }
    
    .crystal-2 {
        bottom: 20%;
        right: 15%;
        animation: float 18s infinite ease-in-out reverse;
    }
    
    @@keyframes float {
        0%, 100% { transform: translateY(0) rotate(0deg); }
        50% { transform: translateY(-20px) rotate(180deg); }
    }
</style>